<template>
  <div class="categoryTitleTwo">
    <!-- 无图片 -->
    <div v-if="!imageList || !imageList[0]" class="upload">
      <!-- <i class="iconfont icon-lunbotu" /> -->
      <img src="../../../assets/img/icon08.png" alt="" />
    </div>
    <div v-if="imageList && imageList[0]" class="type0">
      <div
        v-for="(item, index) in imageList"
        :key="index"
        class="imgLis"
        :style="{ 'margin-bottom': datas.imageMargin + 'px' }">
        <!-- 图片 -->
        <img :src="item.src" draggable="false" :style="{ 'border-radius': datas.borderRadius + 'px' }" />
      </div>
    </div>
    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>
<script>
export default {
  name: "CategoryTitleTwo",
  props: {
    datas: Object,
  },
  data() {
    return {};
  },
  computed: {
    imageList() {
      return this.datas.imageList;
    },
  },
  methods: {},
};
</script>
<style lang="scss">
.categoryTitleTwo {
  position: relative;
  /* 无图片 */
  .upload {
    // background: #979797;
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    // i {
    //     font-size: 120px;
    // }
    img {
      width: 100%;
    }
  }
  /* 类型0 */
  .type0 {
    box-sizing: border-box;
    /* 图片列表 */
    .imgLis {
      width: 100%;
      position: relative;
      overflow: hidden;
      &:last-child {
        margin: 0 !important;
      }
      /* 图片 */
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
